<template>
    <div>
        <input type="button" @click="changeRows" value="点我">
        <vw-grid2 :gridColumns="gridColumns" :grid-rows="gridRows"></vw-grid2>
    </div>
</template>

<script>

    export default {
        name: 'App',
        components: {},
        data() {
            return {
                gridColumns: [
                    [
                        {title: '企业名称', rowspan: 2, width: 269, key: 'item'},
                        {title: '销量', colspan: 4,},
                        {title: '收入', colspan: 4,},
                        {title: '产值', colspan: 4,},
                    ],
                    [
                        {title: '本期累计', width: 114, key: 'a1'},
                        {title: '同期累计', width: 114, key: 'a2'},
                        {title: '累计同比', width: 114, key: 'a3'},
                        {title: '增长额', width: 114, key: 'a4'},
                        {title: '本期累计', width: 114, key: 'b1'},
                        {title: '同期累计', width: 114, key: 'b2'},
                        {title: '累计同比', width: 114, key: 'b3'},
                        {title: '增长额', width: 114, key: 'b4'},
                        {title: '本期累计', width: 114, key: 'c1'},
                        {title: '同期累计', width: 114, key: 'c2'},
                        {title: '累计同比', width: 114, key: 'c3'},
                        {title: '增长额', width: 114, key: 'c4'},
                    ]
                ],
                gridRows: [
                    {
                      backgroundColor: '#E3ECF3',
                      data: {
                            item: {
                                value:'一行'
                            },
                            a1: {
                                fontColor:'#D23232',
                                value:111,
                            },
                            a2: {
                                fontColor:'#35A257',
                                value:222
                            },
                            a3: {
                                value:333,
                            },
                            a4: {
                                value:444
                            },
                            b1: {
                                value:111
                            },
                            b2: {
                                value:222
                            },
                            b3: {
                                value:333
                            },
                            b4: {
                                value:444
                            },
                            c1: {
                                value:111
                            },
                            c2: {
                                value:222
                            },
                            c3: {
                                value:333
                            },
                            c4: {
                                value:444
                            },
                        }
                    },
                    {
                        data: {
                            item: {
                                value:'二行'
                            },
                            a1: {
                                value:'汉字汉字',
                                rowspan:2,
                                writingMode:'vertical',
                                fontFamily:'PingFangSC-Medium'
                            },
                            a2: {
                                value:222
                            },
                            a3: {
                                value:333
                            },
                            a4: {
                                value:444
                            },
                            b1: {
                                value:111
                            },
                            b2: {
                                value:222
                            },
                            b3: {
                                value:333
                            },
                            b4: {
                                value:444
                            },
                            c1: {
                                value:111
                            },
                            c2: {
                                value:222
                            },
                            c3: {
                                value:333
                            },
                            c4: {
                                value:444
                            },
                        }
                    },
                    {
                        data: {
                            item: {
                                value:'三行'
                            },
                            a2: {
                                value:222
                            },
                            a3: {
                                value:333
                            },
                            a4: {
                                value:444
                            },
                            b1: {
                                value:111
                            },
                            b2: {
                                value:222
                            },
                            b3: {
                                value:333
                            },
                            b4: {
                                value:444
                            },
                            c1: {
                                value:111
                            },
                            c2: {
                                value:222
                            },
                            c3: {
                                value:333
                            },
                            c4: {
                                value:444
                            },
                        }
                    },
                ],
            }
        },
        methods: {
            changeRows:function(){
                this.gridRows.pop();
            }
        }
    }
</script>

<style>
    @import 'font/font.scss';
</style>
